<template>

    <ForOneHeader :enableBack="true" />



    <view class="top">

        <u-swiper height="850rpx" indicator keyName="image" circular class="index-swiper" :list="banner_url"></u-swiper>
    </view>


    <u-sticky customNavHeight="130rpx" offsetTop="0" zIndex="10">
        <view class="main-scroll-container">
            <scroll-view class="scroll-1 scroll" scroll-y @scroll="onScroll1" :scroll-with-animation="true"
                :scroll-into-view="current_scroll_1_pos">
                <view class="menu-item-wrapper" v-for="(item, index) in items" :key="item.key" :class="{
                    'active-menu-item-wrapper': item.key == current_scroll_1_pos,
                    'sibling-bottom-wrapper': split(item.key, '-')[1] == Number(split(current_scroll_1_pos, '-')[1]) + 1,
                    'sibling-top-wrapper': split(item.key, '-')[1] == Number(split(current_scroll_1_pos, '-')[1]) - 1
                }">
                    <view :class="{
                        'active-menu-item': item.key == current_scroll_1_pos,
                        'sibling-bottom': split(item.key, '-')[1] == Number(split(current_scroll_1_pos, '-')[1]) + 1,
                        'sibling-top': split(item.key, '-')[1] == Number(split(current_scroll_1_pos, '-')[1]) - 1
                    }" :id="item.key" @tap="tapScroll___1(item.key)" class="menu-item">

                        <view class="menu-title" v-if="sysInfo.deviceModel.indexOf('iPhone') == -1 && index === 0">
                            <view style="">
                                <view style="height: 20rpx;width: 100%;padding-top: 20rpx;"></view>
                            </view>
                            <view>{{ item.title }}</view>

                        </view>
                        <view class="menu-title padding-top-20" v-else>
                            <view>{{ item.title }}</view>
                        </view>

                        <image class="menu-icon" :class="{ 'active-menu-icon': item.key == current_scroll_1_pos }"
                            height="100rpx" mode="widthFix" :src="item.icon_url"></image>
                        <view class="divider" v-if="item.key != current_scroll_1_pos">
                            <u-line></u-line>
                        </view>
                    </view>
                </view>

            </scroll-view>
            <view :class="['main-scroll-mask']" style="background-color: transparent;">

            </view>

        </view>


    </u-sticky>

    <view class="x-layout">
        <view class="x-pad"></view>
        <view :class="['bottom-x']">

            <view class="unit" v-for="(item, index) in items" :id="item.key" :key="item.key">
                <view :id="'the-id-' + index">
                    <view style="height: 20rpx;width: 100%;" v-if="sysInfo.deviceModel.indexOf('iPhone') == -1"></view>
                    <view class="t-unit-wrapper">

                        <view class="round"></view>
                        <view class="t-unit">{{ item.title }}</view>
                    </view>
                    <view class="item-wrapper">
                        <view class="item" v-for="(i, d) in item.children" :key="d" @tap="handleTap(i.id)">
                            <view class="item-right">
                                <IndexTitle :zh_text="i.title" :en_text="i.en_title"></IndexTitle>
                            </view>

                            <view v-if="i.product_banner_list.length > 0" class="product-banner">
                                <u-swiper  height="720rpx" indicator keyName="image" circular  :list="i.product_banner_list.map(el=>el.url)"></u-swiper>
                            </view>
                            <view v-else>
                                <view :class="[{ 'item-left': aspect_ratio == '1' }, { 'item-left-2': aspect_ratio == '2' }]">
                                    <up-image :src="i.bg_url" :height="aspect_ratio == 1 ? '280rpx' : '720rpx'"
                                        width='100%' @tap="handleTap(i.id)" :showMenuByLongpress="false" />

                                </view>
                            </view>


                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>


    <Sticky :id="props.id" list_url="/api/onlyforone/grille/list2" />
    <page-container :show="show" @afterleave="on_close" mode="bottom" round="10" style="width: 100vw;z-index: 1000;">



        <u-sticky offset-top="0" zIndex="1000">
            <view class="tools">
                <view style="padding-left: 20rpx;z-index: 1000;">
                    {{ pop_up_title }}
                </view>
                <view style="padding-right: 20rpx;">
                    <view class="menu">
                        <button open-type="share" class="share-btn"
                            style="background-color: #fff;border: 1rpx solid #fff; ">
                            <u-icon name="share-square" size="26"></u-icon>
                        </button>
                        <view class="gap"></view>
                        <view>
                            <u-icon name="close" size="26" @tap="to_close"></u-icon>
                        </view>
                    </view>
                </view>


            </view>

        </u-sticky>

        <WallDetail :show="show" hardware_pre_text="柜门" :index="index" :url="url" style="height: 80vh;z-index: 1000;"
            @setTitle="setTitle">
        </WallDetail>

    </page-container>
</template>

<script setup lang="ts">
// Add your script setup code here
import { ref, watch, defineProps, nextTick } from 'vue';
import IndexTitle from '@/pages/walls/index-title.vue'
import { getData } from '@/api/cupboard'
import { onShareAppMessage, onShareTimeline, onPageScroll } from '@dcloudio/uni-app';
import { split } from 'lodash';
import { shareUtils } from '@/utils/share'
import * as _ from 'lodash'
import WallDetail from '@/pages/grilles/detail.vue'
import useShare from '@/mixins/share';

const { getShareCover } = useShare()

const cus_top_h = ref(0)
onPageScroll((el) => {

    if (lock_scroll_1.value) {
        return;
    }
    // debugger
    let scrollTop = el.scrollTop

    let max = scrollMap[scrollMap.length - 1][0]
    if (scrollTop > max) {
        let [offset, id] = scrollMap[scrollMap.length - 1]
        let exps = split(id, '-')
        current_scroll_1_pos.value = `${exps[0]}-${Number(exps[1]) + 1}`
        return;
    }

    for (let i = 0; i < scrollMap.length; i++) {
        const [offset, id] = scrollMap[i]
        if (scrollTop - cus_top_h.value < offset) {
            current_scroll_1_pos.value = id

            break;
        }
    }


})

const url = ref('')
const banner_url = ref('')

const layout = ref('1')
const aspect_ratio = ref('1')

const show = ref(false)
const index = ref(-1)
const pop_up_title = ref('')
const to_close = () => {
    show.value = false
}

const sysInfo = ref({
    deviceModel: ''
})

const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
})


const on_close = () => {
    show.value = false
}


const tapScroll___1 = (id) => {
    // debugger

    let scrollTop = 0;

    lock_scroll_1.value = true

    current_scroll_1_pos.value = `${id}`
    if (id == 'c-0') {
        return wx.pageScrollTo({
            scrollTop,
            complete: function () {
                setTimeout(function () {
                    lock_scroll_1.value = false
                }, 500)
            }
        })
    }
    scrollMap.forEach((el, index) => {
        if (el[1] == id) {
            scrollTop = scrollMap[index - 1][0]
        }
    })
    scrollTop = scrollTop + cus_top_h.value
    wx.pageScrollTo({
        scrollTop,
        complete: function () {
            setTimeout(function () {
                lock_scroll_1.value = false
            }, 500)

        }
    })



    console.log(id)
}
const handleTap = (_id) => {

    url.value = `/api/onlyforone/cupboard/detail/${_id}`
    show.value = true
    index.value = _id
}


const setTitle = (title: String, share_cover_url: any) => {
    pop_up_title.value = title
    share_cover.value = share_cover_url
}

const lock_scroll_1 = ref(false);

let scrollMap = []



const items = ref([]);
const current_scroll_1_pos = ref('c-0');

const share_cover = ref('')

getData().then(res => {
    const { data } = res
    items.value = data.map((el, index) => {
        el.key = `c-${index}`
        return el
    })
    banner_url.value = res.banner_url
    aspect_ratio.value = res.aspect_ratio
    layout.value = res.layout
    return res
}).then(res => {


    nextTick(() => {
        const query = wx.createSelectorQuery()
        let offset = 0;
        res.data.forEach((ca, index) => {
            query.select(`#the-id-${index}`).boundingClientRect()


        })

        query.exec(function (_res) {

            // debugger
            _res.forEach((ca, index) => {
                const item = items.value[index]
                const exp = split(item.key, '-')
                let height = _res[index].height
                // debugger
                offset += height

                scrollMap.push([offset, `${exp[0]}-${exp[1]}`])
            })


        })

        const _query = wx.createSelectorQuery()

        _query.select(`.top`).boundingClientRect()

        _query.exec(function (res) {

            cus_top_h.value = res[0].height
        })

        // console.log(scrollMap)

        return true




    })


}).then(res => {

    if (props.id > 0) {
        handleTap(props.id)
    }

})

uni.getSystemInfo().then(systemInfo => {

    sysInfo.value = systemInfo

    console.log(systemInfo)
})




const onScroll1 = (e) => {

};






const page = getCurrentPages().pop()

let path: string = page.route
onShareTimeline(() => {

    const share_path = show.value ? `${path}?id=${index.value}` : path
    const promise = new Promise(resolve => {
        getShareCover(path, pop_up_title.value, share_cover.value).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })

    return {
        title: show.value ? pop_up_title.value : null,
        imageUrl: share_cover.value,
        path: shareUtils.buildPathQuery(share_path),
        promise,
    }
})
onShareAppMessage(() => {
    const share_path = show.value ? `${path}?id=${index.value}` : path
    const promise = new Promise(resolve => {
        getShareCover(path, pop_up_title.value, share_cover.value).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })

    return {
        title: show.value ? pop_up_title.value : null,
        imageUrl: share_cover.value,
        path: shareUtils.buildPathQuery(share_path),
        promise,
    }


})






</script>

<style lang="scss" scoped>
@import '@/pages/grilles/common.scss';
</style>